<script setup lang="ts">
import { ref } from 'vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const isCollapse = ref(true)
</script>

<template>
    <div class="content">
        <el-row>
            <el-col :span="3">
            <h5 class="mb-2">Меню</h5>
                <el-menu
                    default-active="1"
                    :collapse="isCollapse"
                    class="account-menu"
                    @open="handleOpen"
                    @close="handleClose"
                >
                    <el-menu-item index="1">
                        <el-icon><House /></el-icon>
                        <template #title>Мой профиль</template>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <el-icon><ChatRound /></el-icon>
                        <template #title>Блог мыслей</template>
                    </el-menu-item>
                    <el-sub-menu>
                        <template #title>
                            <el-icon><MessageBox /></el-icon>
                            <span>CRM</span>
                        </template>
                        <el-menu-item-group index="3">
                            <el-menu-item index="3-1">
                                <el-icon><User /></el-icon>
                                <template #title>Клиенты</template>
                            </el-menu-item>
                            <el-menu-item index="3-2">
                                <el-icon><PriceTag /></el-icon>
                                <template #title>Услуги</template>
                            </el-menu-item>
                            <el-menu-item index="3-3">
                                <el-icon><Calendar /></el-icon>
                                <template #title>Сессии</template>
                            </el-menu-item>
                            <el-menu-item index="3-4">
                                <el-icon><ChatDotSquare /></el-icon>
                                <template #title>Чаты</template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="4">
                        <el-icon><View /></el-icon>
                        <template #title>Мероприятия</template>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <el-icon><Document /></el-icon>
                        <template #title>Статьи</template>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <el-icon><Wallet /></el-icon>
                        <template #title>Кошелек</template>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <el-icon><Bell /></el-icon>
                        <template #title>Уведомления</template>
                    </el-menu-item>
                    <el-menu-item index="8">
                        <el-icon><Service /></el-icon>
                        <template #title>Служба поддержки</template>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="21">
                Рабочая область
            </el-col>
        </el-row>
    </div>
</template>

<style lang="sass" scoped>
@import '../assets/styles/main'

.content
    padding: 1em
</style>